<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    .progress {
      stroke-dasharray: 377;
      stroke-dashoffset: 377;
    }
  </style>
</head>
<body>
  <svg width="200" height="200" class="container">
    <circle 
    class="progress"
    cx="100" cy="100" r="60" 
    fill="transparent"
    stroke="pink"
    stroke-width="10"
    ></circle>
    <text 
    class="text"
    x="100" y="100" fill="pink" text-anchor="middle" alignment-baseline="middle">100%</text>
  </svg>
  <svg width="200" height="200" class="container">
    <circle 
    class="progress"
    cx="100" cy="100" r="60" 
    fill="transparent"
    stroke="pink"
    stroke-width="10"
    ></circle>
    <text 
    class="text"
    x="100" y="100" fill="pink" text-anchor="middle" alignment-baseline="middle">100%</text>
  </svg>
</body>
<script>
  const progress = document.querySelector('.progress')
  const text = document.querySelector('.text')

  const loadArr = [1,4,10,20,30,60,70,100]
  // const loadArr = [1,4,10,20,30,60,70,100,200,250,300,400,500,600,700,800,900]
  let index = 0
  const total = progress.getTotalLength()

  const timer = setInterval(()=>{
    progress.style.strokeDashoffset = total - 
    (loadArr[index] / 100) * total
    index ++ 
    text.textContent = `${loadArr[index]}%`
    if(index === loadArr.length){
      clearInterval(timer)
      text.textContent = '至尊宝牛逼！'
    }

    // progress.style.strokeDasharray = total - 
    // (loadArr[index] / 900) * total
    // index ++ 
    // text.textContent = `${loadArr[index]}%`
    // if(index === loadArr.length){
    //   clearInterval(timer)
    //   text.textContent = '至尊宝牛逼！'
    // }

  },100)




</script>
</html>